<template>
  <div class="storeDetails">
    <!-- Header部分 -->
    <Header title="店铺" />
    <div class="content">
      <div class="img"></div>
      <div class="foodSort">
        <div class="name">
          {{title}}
          <img :src="img" alt="" class="store-img">
        </div>
        <van-tabs color="#ffc400">
        <van-tab v-for="(item, index) in storeData" :title="item.name" :key="index" >
        <!-- 传递索引，根据索引展示不同的内容   -->
        <FoodList :index="index" :foodData="item?.data" />
      </van-tab>
        </van-tabs>
      </div>
    </div>
        <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" />
      <van-action-bar-icon icon="cart-o" text="购物车" :badge="store.state.cartList.length" @click="goCart"/>
      <van-action-bar-button type="warning" text="加入购物车" @click="handleAddCart"/>
      <van-action-bar-button type="danger" text="立即购买" @click="goBuy" />
    </van-action-bar>
  </div>
</template>
<script>
  import { reactive, toRefs } from 'vue'
  import Header from '../../components/Header.vue'
  import FoodList from './components/FoodList.vue'
  import { useStore } from 'vuex'
  import { useRouter } from 'vue-router'
  import { Toast } from 'vant'
  export default {
    components: {
      Header,
      FoodList
    },
    setup() {
        let store = useStore()
        let router = useRouter()
        let data = reactive({
        title: '鱼拿酸菜鱼',
        img: 'https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440',
        storeData: [
        {
          name: '点菜',
          data: {
            content: '点菜',
            items: [
              {
                text: '热销套餐',
                children: [
                  {
                    pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cfcy168.com%2FUploadFiles%2F2020%2F2%2F15904074889874037.jpg&refer=http%3A%2F%2Fwww.cfcy168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645421933&t=66b58fbba9dce6f6b397e38820de24dc',
                    title: '隆江猪脚饭',
                    num: 0,
                    price: 25.0,
                    id: 0,
                    add: true
                  },
                  {
                    pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cfcy168.com%2FUploadFiles%2F2020%2F2%2F15904074889874037.jpg&refer=http%3A%2F%2Fwww.cfcy168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645421933&t=66b58fbba9dce6f6b397e38820de24dc',
                    title: '隆江猪脚饭',
                    num: 0,
                    price: 25.0,
                    id: 1,
                    add: true
                  }
                ]
              },
              {
                text: '超级折扣',
                children: [
                  {
                    pic: 'https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440',
                    title: '无骨酸菜鱼+肥牛双拼',
                    num: 0,
                    price: 25.0,
                    id: 5,
                    add: true
                  },
                  {
                    pic: 'https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440',
                    title: '香辣水煮鱼+肥牛双拼',
                    num: 0,
                    price: 25.0,
                    id: 6,
                    add: true
                  }
                ]
              }
            ]
          }
        },
        {
          name: '评价',
          data: {
            content: '评价'
          }
        },
        {
          name: '商家',
          data: {
            content: '商家'
          }
        }
      ]
      })

      const handleAddCart = (type) => {
        const newList = []
        data.storeData.forEach((item) =>
          item.data.items?.forEach((item) => {
            item.children.forEach((item) => {
              if (item.num > 0) {
                newList.push(item)
              }
            })
          })
        )
        if (newList.length === 0) {
          Toast('请选择商品')
          return
        }
        store.commit('addcart', newList)
        return type === 'buy' ? goCart() : ''
      }
      // 跳到购物车页面
      const goCart = () => {
        router.push('/cart')
      }
      const goBuy = () => {
        handleAddCart('buy')
      }
      return {
        ...toRefs(data),
        handleAddCart,
        store,
        goCart,
        goBuy
      }
    }
  }
</script>

<style lang="less" scoped>
  .storeDetails {
      height: 100%;
      display: flex;
      flex-flow: column;
      .content {
        flex: 1;
        overflow-y: auto;
        .img {
          background: url("../../assets/yuna.jpg") no-repeat center/cover;
          width: 100%;
          height: 150px;
        }
        .foodSort {
          height: 500px;
          background-color: #fff;
          margin-top: -30px;
          border-radius: 20px 20px 0 0;

          .sort {
            margin-top: 10px;
          }
          .name {
            display: flex;
            padding: 20px;
            justify-content: space-between;
            .store-img {
              width: 80px;
              height: 80px;
              border-radius: 10px;
              margin-top: -30px;
            }
          }
        }
      }
    }
</style>
